<template>
    <div>
        <a-page-header title="表单组件" :ghost="false" sub-title="表单元素" />
        <a-form :label-col="{ span: 4 }" :wrapper-col="{ span: 16 }">
            <a-card class="mt-2">
                <template #title> 表单组件 </template>
                <a-divider>Input</a-divider>
                <a-row type="flex" justify="center">
                    <a-col :span="12">
                        <a-form-item label="标题">
                            <a-input placeholder="标题" />
                        </a-form-item>
                        <a-form-item label="起止日期">
                            <a-range-picker style="width: 100%" />
                        </a-form-item>
                        <a-form-item label="描述">
                            <a-text-area
                                :auto-size="{ minRows: 2, maxRows: 5 }"
                                placeholder="test"
                            />
                        </a-form-item>
                        <a-form-item label="客户">
                            <a-input placeholder="" />
                        </a-form-item>
                        <a-form-item label="权重">
                            <a-input-number :min="0" :max="100" />
                            <span> %</span>
                        </a-form-item>

                        <a-form-item :wrapper-col="{ span: 16, offset: 4 }">
                            <a-button type="primary">提交</a-button>
                            <a-button>取消</a-button>
                        </a-form-item>
                    </a-col>
                    <a-col :span="12">
                        <a-form-item label="标题">
                            <a-input placeholder="标题" />
                        </a-form-item>
                        <a-form-item label="起止日期">
                            <a-range-picker style="width: 100%" />
                        </a-form-item>
                        <a-form-item label="描述">
                            <a-text-area
                                :auto-size="{ minRows: 2, maxRows: 5 }"
                                placeholder="test"
                            />
                        </a-form-item>
                        <a-form-item label="客户">
                            <a-input placeholder="" />
                        </a-form-item>
                        <a-form-item label="权重">
                            <a-input-number :min="0" :max="100" />
                            <span> %</span>
                        </a-form-item>

                        <a-form-item :wrapper-col="{ span: 16, offset: 4 }">
                            <a-button type="primary">提交</a-button>
                            <a-button>取消</a-button>
                        </a-form-item>
                    </a-col>
                </a-row>

                <a-divider>Input</a-divider>
            </a-card>
        </a-form>
    </div>
</template>

<script lang="ts">
import { defineComponent, ref } from "vue";

import {
    Result, PageHeader,
    Row, Col, Card, Steps, Button, Form, Input, Radio,
    Checkbox, Switch, DatePicker, Select, InputNumber, Divider
} from "ant-design-vue";

export default defineComponent({
    components: {
        ACard: Card,
        ASteps: Steps,
        AStep: Steps.Step,
        AButton: Button,
        AForm: Form,
        AFormItem: Form.Item,
        AInput: Input,
        AInputNumber: InputNumber,
        ATextArea: Input.TextArea,
        ARadio: Radio,
        ARadioGroup: Radio.Group,
        ACheckbox: Checkbox,
        ACheckboxGroup: Checkbox.Group,
        ASwitch: Switch,
        ARangePicker: DatePicker.RangePicker,
        ASelect: Select,
        ASelectOption: Select.Option,
        ARow: Row,
        ACol: Col,
        ADivider: Divider,
        AResult: Result,
        APageHeader: PageHeader
    },
    setup() {

    }
});
</script>

<style lang="less" scoped>
.ant-card-body {
    padding: 18px 20px;
}
</style>
